<template>
  <div>
    <el-form :model="form"  :rules="rules" ref="form" label-position="top">
      <el-col>
        <el-form-item :label="$t('config.customer.fieldName')">
          <el-input v-model.trim="customizeFieldData.name" size="mini"></el-input>
        </el-form-item>
      </el-col>
      <el-col>
        <el-form-item :label="$t('config.customer.whetherNecessary')">
          <el-radio-group v-model="customizeRequire">
            <el-radio class="radio" :label="true">{{$t('public.yes')}}</el-radio>
            <el-radio class="radio" :label="false">{{$t('public.no')}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col>
        <el-form-item :label="$t('config.customer.noupdate')">
          <el-radio-group v-model="customizeFieldData.noupdate">
            <el-radio class="radio" :label="true">{{$t('public.yes')}}</el-radio>
            <el-radio class="radio" :label="false">{{$t('public.no')}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <custom-fields-type :formdata = "formdata" @customizeFieldType="handleCustomizeFieldType"></custom-fields-type>
    </el-form>
    <div class="dialog-footer">
      <el-button @click.stop="cannelCustomizeField">{{$t('public.cancel')}}</el-button>
      <el-button type="primary" @click="saveCustomizeField">{{$t('public.confirm')}}</el-button>
    </div>
  </div>
</template>
<script>
  import CustomFieldsType from './CustomFieldsType.vue'
  import { deepClone } from '@/utils/m7Utils.js'
  export default {
    name: 'OperateCustomField',
    data () {
      return {
        customizeRequire: false,
        customizeFieldData: {},
        formdata: {
          formdataChoices: [],
          type: ''
        }
      }
    },
    props: {
      isAdd: Boolean,
      template_id: String,
      customizeField: Object,
      email: {
        type: Object,
        default: function () {
          return {
            isShow: true,
            lastCodeKey: '',
            form: null
          }
        }
      }
    },
    methods: {
      cannelCustomizeField () {
        this.$emit('customizeFields', {data: '', flag: false, isAdd: false})
      },
      handleCustomizeFieldType (data) {
        console.log(data)
        this.formdata.type = data.type
      },
      saveEditCustomize () {
        this.customizeFieldData.require = this.customizeRequire ? 'require' : ''
        let data
        if (this.formdata.type === 'dropdown' || this.formdata.type === 'checkbox' || this.formdata.type === 'radio') {
          let choices = {}
          for (let i = 0; i < this.formdata.formdataChoices.length; i++) {
            choices[i] = this.formdata.formdataChoices[i]
          }
          data = {
            _id: this.customizeFieldData._id,
            template_id: this.template_id,
            type: this.formdata.type,
            choices: choices,
            name: this.customizeFieldData.name,
            required: this.customizeFieldData.require,
            noupdate: this.customizeFieldData.noupdate
          }
        } else {
          data = {
            _id: this.customizeFieldData._id,
            template_id: this.template_id,
            type: this.formdata.type,
            name: this.customizeFieldData.name,
            required: this.customizeFieldData.require,
            noupdate: this.customizeFieldData.noupdate
          }
        }
        this.$store.dispatch('editCustomField', data).then(resp => {
          this.$emit('customizeFields', {data: data, flag: false, isAdd: false})
        })
      },
      saveAddCustomize () {
        console.log(this.template_id)
        this.customizeFieldData.require = this.customizeRequire ? 'require' : ''
        let data
        if (this.formdata.type === 'dropdown' || this.formdata.type === 'checkbox' || this.formdata.type === 'radio') {
          let choices = {}
          for (let i = 0; i < this.formdata.formdataChoices.length; i++) {
            choices[i] = this.formdata.formdataChoices[i]
          }
          data = {
            template: this.template_id,
            type: this.formdata.type,
            choices: choices,
            name: this.customizeFieldData.name,
            required: this.customizeFieldData.require,
            noupdate: this.customizeFieldData.noupdate
          }
        } else {
          data = {
            template: this.template_id,
            type: this.formdata.type,
            name: this.customizeFieldData.name,
            required: this.customizeFieldData.require,
            noupdate: this.customizeFieldData.noupdate
          }
        }
        this.$store.dispatch('addCustomerField', data).then(resp => {
          this.$emit('customizeFields', {data: data, flag: false, isAdd: true})
        })
      },
      saveCustomizeField () {
        if (this.isAdd) {
          this.saveAddCustomize()
        } else {
          this.saveEditCustomize()
        }
      }
    },
    components: {
      CustomFieldsType
    },
    beforeMount () {
      this.customizeFieldData = deepClone(this.customizeField)
      this.customizeRequire = !!this.customizeFieldData.required
//            console.log(this.customizeFieldData.choices)
      for (let key in this.customizeFieldData.choices) {
        this.formdata.formdataChoices.push(this.customizeFieldData.choices[key])
      }
//      this.formdata.formdataChoices = Object.values(this.customizeFieldData.choices)
//      for (let key in this.customizeFieldData.choices) {
//        let a = {}
//        a[key] = this.customizeFieldData.choices[key]
//        this.formdata.formdataChoices.push(a)
//      }
      this.formdata.type = this.customizeFieldData.type
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .email-resend__btn
    display block
    margin-top 10px
</style>
